Text fields Guidelines 文字輸入框指導規則

Usage 用法

當有人需要在使用者介面中輸入文字時，例如填寫聯絡資訊或支付資訊，請使用文字欄位。

文字欄位有兩種型別：

  1. Filled text fields 填充式文字欄位
  1. Outlined text fields 輪廓式文字欄位

兩種型別的文字欄位都使用容器來提供互動的視覺提示，並提供相同的功能。

Outlined text field

Outlined text field 輪廓文字框

輪廓文字框視覺強調較弱，適合在表單等多框佈局場景使用，可簡化整體視覺效果。

Choosing text fields 選擇文字欄位

兩種文字欄位提供相同的功能，因此您使用的文字欄位型別可以僅基於樣式來決定。

選擇那種：

Using both types of text field on the same screen 在同一螢幕上使用兩種型別的文字欄位

如果在使用者介面中同時使用兩種文字欄位，它們應在不同部分中一致使用，不要在同一區域內混合使用。例如，你可以在一個部分中使用輪廓文字欄位，在另一個部分中使用填充文字欄位。

✓ 按區域劃分，在使用者介面使用兩種文字欄位
× 避免放置在同一表單中

Anatomy 結構

Filled text field  填充文字欄位

1 Container 2 Leading icon (optional) 3 Label text (empty) 4Label text (populated) 5 Trailing icon (optional) 6 Active Indicator (focused) 7 Caret 8 Input text 9 Supporting text (optional) 10 Active Indicator (enabled)

Outlined text field  輪廓文字框

1 Container outline (enabled) 2 Label text (unpopulated) 3 Leading icon (optional) 4 Label text (populated) 5 Trailing icon (optional) 6 Container outline (focused) 7 Caret 8 Input text 9 Supporting text (optional)

Containers 容器

容器能讓文字輸入框更容易被看到，因為它與周圍的內容形成了明顯的區別。

填充和邊框

文字輸入框有兩個基本部分：填充色和邊框線。邊框線可以包圍整個輸入框，或者只在底部顯示。當使用者正在使用輸入框時，邊框的顏色和粗細會發生變化來提示狀態。

圓角設計：

兩種輸入框的圓角設計是不同的：輪廓式輸入框四個角都是圓的，而填充式輸入框只有上面兩個角是圓的，下面兩個角是直的。

Label text 標籤文字

標籤文字用簡單文字說明這個輸入框需要填寫什麼內容。所有文字框都必須有標籤。標籤要和輸入框內的文字對齊，並且要保持一直顯示。標籤可以放在兩個位置：文字框中間，或者文字框頂部。為了確保標籤容易閱讀，要注意：不要讓標籤文字被切斷，不要讓標籤換行，保持文字簡短明瞭。

× 不要階段標籤文字
✓ 標籤文字不應占多行

Required text indicator 必填文字指示符

在標籤旁邊加一個星號 (*) 來表示這是必填項，並在下方說明星號的含義。

Input text 輸入文字

輸入文字就是使用者打字輸入的內容。文字輸入框有三種顯示方式：

單行輸入框：適合簡短內容，超出長度會橫向滾動，不適合長文字。
可擴充套件輸入框：一開始是單行，輸入多了後自動變多行，適合緊湊佈局。
多行文字區域（text area）：高度固定，內容多時縱向滾動，鼓勵使用者輸入長文字，適合網頁端使用。

Prefix text 字首文字

文字欄位可包含字首文字，如貨幣符號。

Suffix text 字尾文字

文字欄位可包含字尾文字，如計量單位或電子郵件域名。

文字欄位，字尾為評分刻度
文字欄位帶有電子郵件域名字尾

Supporting text and character counter 輔助文字和字元計數器

輔助文字用來解釋這個輸入框的作用。最好只用一行文字來說明。如果實在需要，也可以用多行。輔助文字可以一直顯示，或者只在使用者點選輸入框時才顯示。

當輸入框有字數限制時，要顯示一個計數器。計數器會告訴使用者已經輸入了多少字，以及總共可以輸入多少字。

1 Suporting text 輔助文字 2 Character counter 字元計數器

Error text 錯誤文字

對於需要驗證使用者輸入的文字框（比如密碼框），當出現錯誤時，把原來的提示文字換成錯誤提示。這樣做不會在頁面上增加新的文字行，避免了頁面佈局的變化。

× 除了輔助文字之外，請避免新增錯誤文字，因為他們的外觀改變內容的位置
✓ 如果沒有足夠空間清晰描述錯誤，長錯誤資訊可能會換行顯示，在這種情況下，請確保文字欄位之間的間距足夠，以防多行錯誤資訊影響佈局內容

Icons & images 圖示與影象

文字欄位可以新增圖示，但這不是必須的。圖示有幾個用途：

圖示的位置會根據文字方向自動調整：在從左到右寫的語言中，圖示在一邊；在從右到左寫的語言中，圖示會在另一邊。你也可以在文字欄位中放入圖片，圖片高度建議用24dp。這個高度最合適，因為它能讓圖片上下有合適的空間，而且跟其他圖示的大小一致。

  1. 圖示能告訴使用者這個輸入框要填什麼內容，還可以點選它來使用其他功能。比如，點選日曆圖示就會開啟日期選擇器。
  1. 圖示可以用不同樣式顯示輸入是否正確。這對色盲使用者特別有幫助，因為他們可能看不清顏色的區別。
  1. 當使用者輸入了文字後，會出現一個清除圖示，點選它就能快速刪除所有輸入的內容。
  1. 如果看到麥克風圖示，說明這裡可以用語音來輸入文字。
  1. 看到向下的箭頭圖示時，表示點選後會顯示一個選擇列表。
  1. 有些時候會用圖片來幫助使用者理解要輸入什麼。比如在填寫信用卡資訊時，會顯示信用卡的圖片。

Read-only fields 只讀欄位

只讀文字欄位裡的內容是系統預先填好的，使用者看得到但改不了。這種文字欄位看起來和普通的一樣，但會有標記說明它是"只讀"的。

一個填充的只讀文字欄位
一個帶輪廓的只讀文字欄位

Responsive layout 響應式佈局

當螢幕尺寸變大或視窗大小改變時，文字輸入框的容器大小要能靈活調整。要設定合適的最大和最小尺寸，包括外邊距、內邊距和容器寬度，這樣可以讓文字更容易閱讀。

在緊湊視窗尺寸下，文字欄位可以佔據顯示屏的整個寬度，但在中等和擴充套件視窗尺寸下，應透過靈活的邊距或其他容器進行限制。

隨著文字欄位在流動佈局中擴充套件，避免保持固定的邊距和排版屬性，因為這可能導致文字欄位過長。例如，文字欄位不應當跨越大螢幕的整個寬度。

不要在大裝置上使用固定的文字欄位邊距。文字欄位不應跨越大螢幕的全寬。

Density 密度

緊湊排列的輸入框可以幫助使用者快速瀏覽和處理多個資訊專案

Interaction & style 互動與樣式

填充文字欄位和輪廓文字欄位的容器具有相同的功能。描邊顏色和粗細的變化有助於為互動提供清晰的視覺提示。

輸入框的邊框要和周圍的內容形成清晰的視覺區分，這樣使用者更容易找到它。如果使用輪廓式輸入框，要確保邊框和背景色之間的對比度至少是3:1，這樣更容易看清。

✓ 確保對比度3：1
× 對比度低於3:1